<template>
  <ScreenLayoutWithMenu title="物流仓储监控大屏">
    <div class="screen-grid grid-2x3">
      <ChartCard title="库存趋势" grid-area="a">
        <ECharts :option="inventoryOption" />
      </ChartCard>
      <ChartCard title="出入库统计" grid-area="b">
        <ECharts :option="warehouseOption" />
      </ChartCard>
      <ChartCard title="仓储指标" grid-area="c">
        <div class="kpi-container">
          <div class="kpi-item">
            <div class="kpi-label">总库存</div>
            <div class="kpi-value">12,345</div>
            <div class="kpi-change positive">↑ 5.2%</div>
          </div>
          <div class="kpi-item">
            <div class="kpi-label">今日入库</div>
            <div class="kpi-value">567</div>
            <div class="kpi-change positive">↑ 3.1%</div>
          </div>
          <div class="kpi-item">
            <div class="kpi-label">今日出库</div>
            <div class="kpi-value">432</div>
            <div class="kpi-change negative">↓ 2.3%</div>
          </div>
        </div>
      </ChartCard>
      <ChartCard title="仓库分布" grid-area="d">
        <ECharts :option="warehouseLocationOption" />
      </ChartCard>
      <ChartCard title="配送统计" grid-area="e">
        <ECharts :option="deliveryOption" />
      </ChartCard>
      <ChartCard title="商品分类库存" grid-area="f">
        <ECharts :option="categoryOption" />
      </ChartCard>
    </div>
  </ScreenLayoutWithMenu>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ScreenLayoutWithMenu from '../components/ScreenLayoutWithMenu.vue'
import ChartCard from '../components/ChartCard.vue'
import ECharts from '../components/ECharts.vue'
import { generateRandomData, getBarOption, getLineOption, getPieOption } from '../utils/chartOptions'
import './Screen.css'

const inventoryOption = ref({})
const warehouseOption = ref({})
const warehouseLocationOption = ref({})
const deliveryOption = ref({})
const categoryOption = ref({})

onMounted(() => {
  const days = Array.from({ length: 30 }, (_, i) => `${i + 1}日`)
  
  inventoryOption.value = getLineOption({
    categories: days,
    series: [{
      name: '库存量',
      data: Array.from({ length: 30 }, () => Math.floor(Math.random() * 2000) + 10000)
    }]
  })

  warehouseOption.value = getBarOption({
    categories: ['入库', '出库'],
    series: [{
      name: '数量',
      data: [567, 432]
    }]
  })

  warehouseLocationOption.value = getPieOption({
    name: '仓库',
    data: [
      { value: 4500, name: '华东仓' },
      { value: 3800, name: '华北仓' },
      { value: 2800, name: '华南仓' },
      { value: 1245, name: '西南仓' }
    ]
  })

  deliveryOption.value = getBarOption({
    categories: ['已完成', '配送中', '待配送', '异常'],
    series: [{
      name: '订单数',
      data: [850, 120, 30, 5]
    }]
  })

  categoryOption.value = getPieOption({
    name: '商品分类',
    data: [
      { value: 4500, name: '电子产品' },
      { value: 3800, name: '服装' },
      { value: 2800, name: '食品' },
      { value: 1245, name: '其他' }
    ]
  })
})
</script>
